<template>
    <div id="confirm" v-show="showFlag">
        <div class="confirm-wrap">
            <div class="close" @click='hide'>
                &Chi;
            </div>
            <h2 class="confirm-title">
                提交反馈
            </h2>
            <textarea name="" id="" cols="30" rows="10" class="textarea">

            </textarea>
            <div class="btn-wrap">
                <button class="submit btn">确认</button>
                <button class="cancel btn" @click="hide">取消</button>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            showFlag:false
        }
    },
    methods:{
        show(){
            this.showFlag=true;
        },
        hide(){
            this.showFlag=false;
        }
    }
    
}
</script>
<style lang="scss" scoped>
#confirm{
    .confirm-wrap{
        width: 510px;
        height: 300px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 12px 16px 0 12px;
        box-sizing: border-box;
        border: 1px solid #929292;
        background-color: #fff;
    
        // background-color: red;
        .confirm-title{
            font-size: 16px;
            color: #2c2d2d;
            margin-bottom: 14px;
            font-weight: normal;
        }
        .textarea{
            width: 475px;
            height: 208px;
            border: 2px solid #a1a1a1;
            box-sizing: border-box;
            font-size: 16px;
            color: #b5b6b9;

        }
        .btn-wrap{
            width: 132px;
            margin: 0 auto;
            font-size: 0;
            margin-top: 6px;
            .btn{
                display: inline-block;
                background-color: #2bdffb;
                padding: 4px 12px;
                border-radius: 6px;
                font-size: 16px;
                color: #fff;
                cursor: pointer;
                &.submit{
                    margin-right: 18px;
                }
            }
        }
        .close{
            position: absolute;
            right: 10px;
            top: 8px;
            color: #929292;
            font-size: 16px;
            cursor: pointer;
            &:before{
                content: '';
                position: absolute;
                top: -10px;
                left: -10px;
                right: -10px;
                bottom: -10px;
            }
        }

    }
}

</style>

